<!--
<template>
  <div>
    <div class="opt">
      <el-menu default-active="1" mode="horizontal">
        <el-menu-item index="1" @click="changeShow('推荐')">推荐</el-menu-item>
        <el-menu-item index="2" @click="changeShow('书籍')">书籍</el-menu-item>
        <el-menu-item index="3" @click="changeShow('美食')">美食</el-menu-item>
        <el-menu-item index="4" @click="changeShow('家居')">家居</el-menu-item>
        <el-menu-item index="5" @click="changeShow('穿搭')">穿搭</el-menu-item>
        <el-menu-item index="6" @click="changeShow('旅行')">旅行</el-menu-item>
        <el-menu-item index="7" @click="changeShow('日常')">日常</el-menu-item>
        <el-menu-item index="8" @click="changeShow('其他')">其他</el-menu-item>
      </el-menu>
    </div>
    &lt;!&ndash; 核心内容 &ndash;&gt;
    <div class="waterfall">
      <div class="watch_item"  v-for="item in show_data"  >
        <img :src="item.cover" alt="" srcset="" width="175px" height="auto" @click="openInfo(item.id)">

        <div class="watch_item_middle"><span v-html="item.title"></span></div>

        <div class="watch_item_bottom">
          <div>
            <el-avatar :src="item.userPhotopath" size="small"> user </el-avatar>
            &lt;!&ndash;            <el-avatar :src="item.userPhotopath" size="small" style=" width: 100%; height: 100%;"></el-avatar>&ndash;&gt;
          </div>
          <div>
            <span class="name">{{ item.name }}</span>
          </div>
          <div >
            <i class="el-icon-thumb"></i>{{item.likeCount}}
          </div>
          <div >
            <i class="el-icon-star-on" ></i>{{item.collectCount}}
          </div>
        </div>
      </div>
    </div>

    &lt;!&ndash; 详情内容，对话框 &ndash;&gt;
    <el-dialog
      :visible.sync="dialogVisible"
      top="10px"
      width="900px"
      height="80%"
      :before-close="handleClose"
      append-to-body
      style="border-radius: 20px;">

      <div class="dialog_conten">

        &lt;!&ndash; 媒体区域，v-if 自动选择图片或者视频 &ndash;&gt;
        <div class="dialog_conten_media">
          &lt;!&ndash; 自动缩放，居中定位 &ndash;&gt;
          <div class="media_position">

            &lt;!&ndash; 展示图片 &ndash;&gt;
&lt;!&ndash;            v-if="!(notephotos2== null || notephotos2 == '')"&ndash;&gt;
            <div >
              <el-carousel width="1000px" height="600px" :autoplay="true">
                <el-carousel-item v-for="item in notephotos2" :key="item.id">
                  <el-image :src="item.photopath" fit="contain" style="width: 100%; height: 100%;"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>

&lt;!&ndash;            &lt;!&ndash; 展示视频 &ndash;&gt;&ndash;&gt;
&lt;!&ndash;            <div v-if="notephotos2== null || notephotos2 == ''"&ndash;&gt;
&lt;!&ndash;                 style="&ndash;&gt;
&lt;!&ndash;                     position: absolute;&ndash;&gt;
&lt;!&ndash;                     top: 0;&ndash;&gt;
&lt;!&ndash;                     left: 0;&ndash;&gt;
&lt;!&ndash;                     /*transform: translateX(-50%);*/&ndash;&gt;
&lt;!&ndash;              "&ndash;&gt;
&lt;!&ndash;            >&ndash;&gt;
&lt;!&ndash;              <video-player :options="videoOptions" :src="videopath" />&ndash;&gt;

&lt;!&ndash;            </div>&ndash;&gt;
          </div>
        </div>

        &lt;!&ndash; 内容信息区域 &ndash;&gt;
        <div class="dialog_conten_imfo">

          &lt;!&ndash; 第一行：{头像 姓名，关注} &ndash;&gt;
          <div class="one_imfo" >
            &lt;!&ndash;            <div @click="handleUserClick(targetData.user)">&ndash;&gt;
            &lt;!&ndash;              <el-avatar  >&ndash;&gt;
            &lt;!&ndash;                <img :src="targetData.user.headphoto" size="large" style=" cursor: pointer;" >&ndash;&gt;
            &lt;!&ndash;              </el-avatar>&ndash;&gt;
            &lt;!&ndash;            </div>&ndash;&gt;
            <template>
              <div @click="handleUserClick(targetData.user.id)">
                <el-avatar>
                  <img :src="targetData.user.headphoto" size="large" style="cursor: pointer; width: 100%; height: 100%;">
                </el-avatar>
              </div>
            </template>
            <div class="one_imfo_username_span" style="margin-left: 40px; cursor: pointer;" @click="handleUserClick(targetData.user.id)">
              <span>{{targetData. user.name }}</span>
            </div>
&lt;!&ndash;            <el-button type="primary" v-if="ismy===false">buttonCont</el-button>&ndash;&gt;
          <el-button v-if="!ismy && carestate===false" type="primary" round style="margin-left: 20px;  font-weight: bold; font-size: larger;" @click="care(targetData.user.id)">关注</el-button>
            <el-button v-if="!ismy && carestate===true" round  type="primary" round style="margin-left: 20px;   font-weight: bold; font-size: larger; background-color: white; color: black;" @click="offcare(targetData.user.id)">已关注</el-button>

            &lt;!&ndash;            <el-button v-if="targetData.authorId !== this.uid" type="primary" round style="margin-left: 20px; font-weight: bold; font-size: larger;" @click="care(targetData.user.id)">关注</el-button>&ndash;&gt;
&lt;!&ndash;            <el-button v-else-if="targetData.authorId !== this.uid && carestate === true" round type="primary" round style="margin-left: 20px; font-weight: bold; font-size: larger; background-color: white; color: black;" @click="offcare(targetData.user.id)">已关注</el-button>&ndash;&gt;
&lt;!&ndash;            <el-button v-if="targetData.authorId!==this.uid" type="primary" round style="margin-left: 20px;  font-weight: bold; font-size: larger;" @click="care(targetData.user.id)">关注</el-button>&ndash;&gt;
&lt;!&ndash;            <el-button v-else round  type="primary" round style="margin-left: 20px;   font-weight: bold; font-size: larger; background-color: white; color: black;" @click="offcare(targetData.user.id)">已关注</el-button>&ndash;&gt;
          </div>
&lt;!&ndash;          <el-button v-if="carestate===false" type="primary" round style="margin-left: 20px;  font-weight: bold; font-size: larger;" @click="care(targetData.user.id)">关注</el-button>&ndash;&gt;
&lt;!&ndash;            <el-button v-else round  type="primary" round style="margin-left: 20px;   font-weight: bold; font-size: larger; background-color: white; color: black;" @click="offcare(targetData.user.id)">已关注</el-button>&ndash;&gt;



          &lt;!&ndash; 第二行（可滚动内容）&ndash;&gt;
          <div class="two_imfo">

            &lt;!&ndash; 内容: {标题，内容, 创建时间} &ndash;&gt;
            <div>
              <div class="two_imfo_title">
                {{ targetData.title }}
              </div>
              <div class="two_imfo_content">
                {{ targetData.content }}
              </div>
              <div class="two_imfo_created">
                {{ targetData.created | dateFormat}}
              </div>
              <div class="two_imfo_created">共计 {{ targetData.commentCount }} 条评论</div>
              <hr>
            </div>

            &lt;!&ndash; 评论：{共计评论数，评论者头像，评论信息} &ndash;&gt;
            <div>
              &lt;!&ndash; 使用v-for遍历渲染评论 &ndash;&gt;
              <div v-for="item in targetData.comments" >
                <div style="color: #303133;font-size: 15px;font-weight: 800;">
                  <el-avatar :src="item.user.headphoto" size="small" class="avatar" ></el-avatar>
                  {{ item.user.name }}
                </div>
                <div >
                  {{ item.content }}
                </div>
                <div class="two_imfo_created">
                  {{ item.time | dateFormat}}
                </div>
                <hr>
              </div>
              <div style="text-align: center;">
&lt;!&ndash;              <Chart v-bind:noteId="3"> </Chart>&ndash;&gt;
              <Chart :currentNoteId="targetData.id"> </Chart>
                -THE END-
              </div>
&lt;!&ndash;              <div>&ndash;&gt;
&lt;!&ndash;                <provide-message :message="hello">&ndash;&gt;
&lt;!&ndash;                  <child-component></child-component>&ndash;&gt;
&lt;!&ndash;                </provide-message>&ndash;&gt;
&lt;!&ndash;              </div>&ndash;&gt;
            </div>
          </div>

          &lt;!&ndash; 第三行：{点赞，分析 发起评论} &ndash;&gt;
          <div class="three_comment">
            <hr>
            <div class="three_icon">
              <i :class="zan_class" @click="change_zan(targetData.id)" style="cursor: pointer;"></i> <span>点赞数 {{ targetData.likeCount }}</span> &nbsp;&nbsp;&nbsp;&nbsp;
              <i :class="star_class" @click="change_star(targetData.id)" style="cursor: pointer;"></i> <span>收藏数 {{ targetData.collectCount }}</span>
            </div>

            <div class="three_input">
              <el-input placeholder="发表评论" v-model="comment_text">
                <el-button slot="append" icon="el-icon-chat-dot-round" @click="sendComment" ></el-button>
              </el-input>
            </div>

          </div>

        </div>
      </div>
    </el-dialog>

    <el-drawer
      title="官方返利促销活动"
      :visible.sync="rebate_buy_drawer"
      :with-header="true"
      append-to-body
    >

      <h3 style="text-align: center">此页购买的商品，博主也可获得推广返利收益</h3>

      &lt;!&ndash; 商品图片 &ndash;&gt;
      <el-image :src="rebate_goods.goods.picture" fit="contain"></el-image>

      &lt;!&ndash; 商品内容 &ndash;&gt;

      <h2 style="text-align: center;">商品名：{{ rebate_goods.goods.goodsName }}</h2>

      <h1 style="text-align: center;"> 价格：{{ rebate_goods.goods.price }}</h1>

      <h3 style="text-align: center;"> 商品内容：{{ rebate_goods.goods.goodsContent }}</h3>

      &lt;!&ndash; 商品评论 &ndash;&gt;
      <h4>商品评论:</h4>
      <div class="two_imfo_created">
        共计 {{ rebate_goods.goodsComment.length }} 条评论
      </div>
      <div>
        &lt;!&ndash; 使用v-for遍历渲染评论 &ndash;&gt;
        <div v-for="item in rebate_goods.goodsComment" >
          <div style="color: #303133;font-size: 15px;font-weight: 800;">
            <el-avatar :src="item.headphoto" size="small" > user </el-avatar>
            {{ item.username }}
          </div>
          <div >
            {{ item.comment }}
          </div>
          <div class="two_imfo_created">
            {{ item.created | dateFormat}}
          </div>
          <hr>
        </div>
        <div style="text-align: center;"> -THE END-</div>
      </div>

      &lt;!&ndash; 购买按钮 &ndash;&gt;
      <div style="text-align: center;margin-top: 6px;">
        <el-input-number v-model="goodsCount" :min="1" :max="10" label="商品数量"></el-input-number>  &nbsp;
        <el-button type="primary" icon="el-icon-shopping-cart-1" @click="rebate_buy">购买</el-button>
      </div>

    </el-drawer>
  </div>
</template>
<script>
import ProvideMessage from "../test/ProvideMessage";
import VideoPlayer from './VideoPlayer';
// 在组件文件中导入Vue模块
import Vue from 'vue';
import Chart from "../test/Chart";
export default {
  name: 'VideoExample',
  components: {
    VideoPlayer,
    Chart,
    ProvideMessage,
  },
  data() {
    return {
      currentNoteId:1,
      // noteId:0,
      videopath:'',
      notephotos2:[],
      videoUrl: "",
      videoSrc: '',
      // videoJS m3u8播放器
      videoOptions: {
        autoplay: false,
        controls: true,

        sources:
        [
          // {
          //   src:'http://192.168.140.130:9000/photos/7db69358-1340-4092-8ee5-9ddb4059e2c1.mp4',
          //   type: 'video/mp4'
          // }
        ]
      },
      headphoto: window.sessionStorage.getItem('headphoto'),
      goodsCount: 1,
      //返利促销抽屉
      rebate_buy_drawer: false,
      // 点赞 收藏的样式切换
      zan_class: "el-icon-circle-check",
      star_class:"el-icon-star-off",
      targetData:{
        user:{},
        // noteVideo:{},
      },
      dialogVisible : false,
      tempUser: {},
      likecollect:[],
      my:true,
      username: '',
      uid: '',
      userid:'',
      form: {},
      user: {},
      preImgUrl:'',
      formLabelWidth: '100px',
      imfo: {},
      ismy:true,
      noteList:[],
      show_data: [],
      alter_imfo: {},
      // 抽屉控制
      drawer: false,
      comment_text:'',
      likestate:false,
      collectstate:false,
      rebate_goods:{
        "goods": {
          "created": "2023-04-30T06:19:37.000+00:00",
          "updated": null,
          "id": 12,
          "goodsName": "创意家居日用小商品厨房用品",
          "price": 1.61,
          "goodsContent": "品牌: other/其他风格: 日式包装种类: 其他颜色分类: 长方形毛重: 4g适用节日: 春节是否可定制: 否",
          "goodsTag": "平价",
          "picture": "https://tanhua-zxm.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%BA%A2%E4%B9%A6/%E5%95%86%E5%93%81/%E5%B9%B3%E4%BB%B7/new%20-%20%E5%89%AF%E6%9C%AC/QQ%E6%88%AA%E5%9B%BE20230425183202.png",
          "returnRate": 0.2,
          "deleted": 0
        },
        "goodsComment": [
          {
            "created": "2023-04-25T11:21:44.000+00:00",
            "updated": "2023-04-25T15:39:39.000+00:00",
            "id": 23,
            "userId": 2,
            "goodsId": 12,
            "comment": "好用好用",
            "username": "足球张雨绮",
            "headphoto": "https://tanhua-zxm.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%BA%A2%E4%B9%A6/%E5%A4%B4%E5%83%8F/%E7%94%A8%E6%88%B7%E5%A4%B4%E5%83%8F/6.jpg",
            "deleted": 0
          },
          {
            "created": "2023-04-25T11:41:09.000+00:00",
            "updated": "2023-04-25T15:39:39.000+00:00",
            "id": 24,
            "userId": 34,
            "goodsId": 12,
            "comment": "便宜并且耐用！下次还来",
            "username": "阿棒的觅食计划",
            "headphoto": "https://tanhua-zxm.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%BA%A2%E4%B9%A6/%E5%A4%B4%E5%83%8F/%E7%94%A8%E6%88%B7%E5%A4%B4%E5%83%8F/50.jpg",
            "deleted": 0
          }
        ]
      },
      data:{},
      carestate:false,
    }
  },
  watch: {
    // 当targetData的数据发生变化，实时更新videoJS的videoOptions数据
    'targetData.videourl'(newVal, oldVal) {
      // 这里可以根据targetData.videourl的值做出相应的操作
      Vue.set(this.videoOptions.sources, 0, {
        src: newVal,
        type: 'video/mp4'
      });
    }
  },
  created () {
    // 一个测试，m3u8，到时候改到触发事件
    // this.videoOptions.sources[0].src = this.targetData.videourl vue2响应式数据修改数组应慎重
    // Vue.set(this.videoOptions.sources, 0, {
    //   src: this.targetData.videourl,
    //   type: 'video/mp4'
    // });
    this.username = sessionStorage.getItem("username");
    this.uid = sessionStorage.getItem("uid");
    this.getUser()
    console.log(this.uid);
    // console.log(this.videoOptions)
    // 有网络时解开
    this.getData();
  },
  methods: {
    children_search_note(key){
      if(key===''){
        this.getData()
      }else {
        this.$axios.get("/note/searchNote?key=" + key + '&id=' + this.uid).then(resp => {
          this.data = resp.data
          this.show_data = this.data.推荐笔记
        })
      }
    },



    handleUserClick(id){
      console.log("个人主页id："+id);
      this.$router.push("/Red/Mine/Personal2?uid="+id)
    },

    care(id){
      console.log("关注的用户id："+id);
      this.$axios.get('care/care?careuserid='+id+'&userid='+this.uid).then(resp=>{
        console.log(resp.data);
        this.carestate=true
      })
    },
    offcare(id){
      console.log("取消关注的用户id："+id);
      this.$axios.get('care/offcare?careuserid='+id+'&userid='+this.uid).then(resp=>{
        console.log(resp.data);
        this.carestate=false
      })
    },

    getUser(){
      this.$axios.get('user/getOne?id='+this.uid).then(resp=>{
        this.user=resp.data
        console.log(this.user);
        this.userid=this.user.id
      })
    },
    // 获取首页数据
    getData() {
      this.$axios.get( '/note/findAllNoteLess?userId='+this.uid).then(res => {
        //  console.log(res)
        this.data = res.data
        console.log(res.data);
        this.show_data = this.data.推荐笔记
        console.log(this.show_data)
        //  console.log(this.show_data)
      }).catch(res => {
        console.log(res);
      })
    },
    changeShow (type_str) {
      // 推荐 书籍 美食 家居 穿搭 旅行 其他
      if ("推荐" == type_str) {
        this.show_data = this.data.推荐笔记
      }
      else{
        var new_show_data = [];
        for (var i = 0; i < this.data.所有笔记.length; i++) {
          var item = this.data.所有笔记[i];
          if (item.tag == type_str) {
            new_show_data.push(item)
          }
        }
        this.show_data = new_show_data;
      }
    },

    // 查看详情
    openInfo(id){
      console.log(id);

      this.$axios.get('note/findByNoteAll?id='+id).then(resp=>{
        console.log(resp.data);
        this.targetData=resp.data
        console.log(this.targetData.authorId);
        console.log(this.uid);
        console.log(this.targetData.user);
        this.notephotos2=this.targetData.notePhotos
        console.log("gfawfafwa:"+this.targetData.videourl);
        this.videopath=this.targetData.videourl;
        console.log("videopath:"+this.videopath);
        this.videoOptions.sources = [{
          src: this.videopath,
          type: 'video/mp4'
        }];

        this.src2=this.targetData.videourl
        // this.videoOptions.sources.src=this.targetData.videourl
        console.log("fwaafwaw:"+this.videoOptions.sources.src);
        // this.noteVideo=this.targetData.noteVideo
        // console.log("视频路径"+this.noteVideo.videoPath);
        // // this.videoUrl=this.noteVideo.videoPath
        // console.log("gaiojfjaw"+this.targetData.videourl);
        // this.videoOptions.sources.src=this.targetData.videourl
        // console.log("124124141"+this.videoOptions.sources.src);
        // console.log("视频路径2"+this.videoUrl);
        // console.log("图片集合"+this.notephotos2);
        //关注状态
        console.log("文章作者id："+this.targetData.authorId);
        this.$axios.get('care/getcarestate?userid='+this.userid+"&careuserid="+this.targetData.authorId).then(resp=>{
          console.log(resp.data);
          console.log("作者authorId："+this.targetData.authorId);
          console.log("我的id："+this.uid);
          this.ismy = this.targetData.authorId == this.uid;
          console.log("是否相等"+this.ismy);
          this.carestate=resp.data
        })

      }).catch(resp => {
        console.log("服务器异常");
      })
      this.videoOptions.sources.src=this.videoUrl
      //点赞
      this.$axios.get('like/getlikestate?userid='+this.userid+"&noteid="+id).then(resp=>{
        console.log("是否点赞过"+resp.data);
        this.likestate=resp.data
        if (this.likestate){
          this.zan_class = "el-icon-success"
        }else {
          this.zan_class = "el-icon-circle-check"
        }
      })
      //收藏
      this.$axios.get('collect/getcollectstate?userid='+this.userid+"&noteid="+id).then(resp=>{
        console.log("是否收藏"+resp.data);
        this.collectstate=resp.data
        if (this.collectstate){
          this.star_class = "el-icon-star-on"
        }else {
          this.star_class = "el-icon-star-off"
        }
      })
      //关注
      this.dialogVisible = true
    },
    // 关闭对话框
    handleClose(done) {
      done();
    },

    // 切换点赞
    change_zan (noteid) {

      //调用方法，去表里查，如果有对象则不能点，图标为填充式的
      console.log("用户id："+this.userid);
      console.log("文章id："+noteid);
      if (this.likestate){
        this.$axios.get('like/offuserlike?userid='+this.userid+"&noteid="+noteid).then(resp=>{
          this.$message.success("取消点赞")
          this.targetData.likeCount=this.targetData.likeCount-1
          // this.item.likeCount=this.item.likeCount-1
          this.zan_class = "el-icon-circle-check"
          this.likestate=false
        })
      }else {
        this.$axios.get('like/userlike?userid='+this.userid+"&noteid="+noteid).then(resp=>{
          console.log(resp.data);
          this.$message.success("点赞成功")
          this.targetData.likeCount=this.targetData.likeCount+1
          // this.item.likeCount=this.item.likeCount+1
          this.zan_class = "el-icon-success"
          this.likestate=true
        })
      }
    },
    // 切换收藏
    change_star (noteid) {
      //调用方法，去表里查，如果有对象则不能点，图标为填充式的
      console.log("用户id："+this.userid);
      console.log("文章id："+noteid);
      if (this.collectstate){
        this.$axios.get('collect/offusercollect?userid='+this.userid+"&noteid="+noteid).then(resp=>{
          this.$message.success("取消收藏")
          this.targetData.collectCount=this.targetData.collectCount-1
          // this.item.collectCount=this.item.collectCount-1
          this.star_class = "el-icon-star-off"
          this.collectstate=false
        })
      }else {
        this.$axios.get('collect/usercollect?userid='+this.userid+"&noteid="+noteid).then(resp=>{
          console.log(resp.data);
          this.$message.success("收藏成功")
          this.targetData.collectCount=this.targetData.collectCount+1
          // this.item.collectCount=this.item.collectCount+1
          this.star_class = "el-icon-star-on"
          this.collectstate=true
        })
      }
      // this.$axios.get('collect/usercollect?userid='+this.userid+"&noteid="+noteid).then(resp=>{
      //   console.log(resp.data);
      // })

    },
    // 发送评论
    sendComment () {
      this.$axios({
        url: '/found/comment/'+123456,
        method: 'post',
        params: {
          //键值对
          comment: this.comment_text,
        }
      }).then(res => {
        // 评论成功，重新加载数据，清空评论内容
        if ("保存成功" == res.data.data) {
          this.openInfo(123456)
          this.comment_text = ''
        }
      }).catch(res => {
        console.log(res);
      })
    },
    // 返利促销预备
    rebate_buy_prepare () {
      this.rebate_buy_drawer = true
    },
    // 返利购买请求 http://localhost:8080/shopping/settle
    rebate_buy () {
      var my_rebate_buy_data = {
        "goodsId": this.rebate_goods.goods.id+"",
        "price": this.rebate_goods.goods.price+"",
        "count": this.goodsCount+"",
        "userId": this.targetData.noteId+""
      }

      this.$axios({
        url: '/shopping/settle',
        method: 'post',
        data: my_rebate_buy_data
      }).then(res => {
        this.$message.success(res.data.data)
        this.rebate_buy_drawer = false
      }).catch(res => {
        console.log(res);
      })
    }
  }
}
</script>
<style lang="less">
.opt {
  height: 40px;
  margin-bottom: 5px;
  .el-menu-item {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    border: none;
    font-size: 16px;
    background-color: #fff;
    color: rgba(51,51,51,.8);
  }
  .el-menu-item.is-active {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    border: none;
    background-color: #F8F8F8!important;
    color: #333;
    font-weight: 600;
  }
}

// 去除下划线，文本装饰线
.opt .el-menu&#45;&#45;horizontal>.el-menu-item.is-active {
  border-bottom: none;
  text-decoration: none;
}
.opt .el-menu.el-menu&#45;&#45;horizontal {
  border-bottom: none
}
.opt .el-menu&#45;&#45;horizontal.el-menu {
  border-bottom: none
}

// 瀑布流布局
.waterfall {
  padding-left: 10px;
  column-count: 5;//想要排成的列数
  column-gap: 0; // 列间距
  margin-bottom: 150px;
}

.watch_item {
  break-inside: avoid; //避免“瀑布流”内部的内容被断开
  width: 175px;
  margin-bottom: 12px;
  border-radius: 5px;
  // padding-bottom: 5px;
  img {
    border-radius: 10px;
  }
  .watch_item_middle {
    padding: 5px;
  }
  .watch_item_bottom {
    padding: 5px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-around;
    .name {
      padding-left: 10px;
      color: #666666;
      font-size: 12px;
    }
    .zan {
      padding-left: 10px;
    }
  }
}

.watch_item:hover {
  cursor: pointer;
  transform: scale(1.02);
  transition-duration:0.1s;
  transition-timing-function:linear;
  transition-delay:0s;
  transition-property:all;
  box-shadow:5px 5px 20px 5px rgba(0,0,0,0.15);
  filter: contrast(1.25);
}

.el-dialog {
  border-radius: 15px;
  // overflow: hidden;
}

// 笔记详情对话框
.dialog_conten {
  width: 100%;
  height: 600px;
  // display: flex;
  position: relative;

  // 笔记媒体区域
  .dialog_conten_media {
    width: 60%;
    height: 100%;
    // background-color: burlywood;
    position: absolute;
    left: 0;
    top: 0;
    .media_position {
      border-radius: 5px;
      overflow: hidden;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      // background-color: #333;
    }
    .vjs_video_3-dimensions {
      width: 500px;
      height: 540px;
    }
  }
  // 笔记信息
  .dialog_conten_imfo {
    width: 40%;
    height: 100%;
    // background-color: cadetblue;
    // border: 1px solid red;
    position: absolute;
    right: 0;
    top: 0;
    // 第一行
    .one_imfo {
      width: 100%;
      height: 40px;
      line-height: 40px;
      position: relative;
      // 头像 写定 行内样式

      // 用户名
      .one_imfo_username_span {
        height: 40px;
        line-height: 40px;
        color: #303133;
        font-size: 23px;
        font-weight: 800;
        position: absolute;
        left: 30%;
        top: 0;
        transform: translateX(-50%)
      }
      // 关注按钮
      .el-button.el-button&#45;&#45;primary.is-round {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    // 第二行
    // 去除滚动栏，保留滚动效果
    .two_imfo::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
    .two_imfo {
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
      height: 75%;
      // background-color: #f2c0c0;
      overflow-y: scroll;
      .two_imfo_title {
        color: rgb(51, 51, 51);
        display: block;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "PingFang TC", "PingFang HK", "Microsoft Yahei", "Microsoft JhengHei";
        font-size: 20px;
        font-weight: 600;
        text-align: center;
      }
      .two_imfo_content {
        margin-top: 6px;
        color: rgb(51, 51, 51);
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "PingFang TC", "PingFang HK", "Microsoft Yahei", "Microsoft JhengHei";
        font-size: 16px;
        font-weight: 400;
      }
      .two_imfo_created {
        margin-top: 6px;
        color: rgba(51, 51, 51, 0.6);
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "PingFang TC", "PingFang HK", "Microsoft Yahei", "Microsoft JhengHei";
        font-size: 12px;
      }
    }

    // 第三行
    .three_comment {
      // position: absolute;
      // bottom: 0;
      width: 100%;
      height: 100px;
      // background-color: #f2c0c0;
      position: relative;
      padding-left: 10px;
      .three_icon {
        font-size: 26px;
        font-weight: 800;
        height: 36px;
        line-height: 36px;
        span {
          font-size: 10px;
          font-weight: 400;
          line-height: 36px;
        }
      }
      .three_input {
        position: absolute;
        bottom: 0px;
        width: 96%;
        .el-input__inner {
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
        }
        .el-input-group__append {
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
        }
      }
    }
  }
}
</style>
-->
